<template>
  <div>
    <el-container>
      <el-header>
        <font style="size: 19px;color: black;font-family: 华文行楷">委托中心</font>
        <a href="/mine" style="text-decoration: none;color: gainsboro"><span
            style="float: right; font-size: 18px;color: black"><i class="el-icon-user-solid"></i>个人中心</span></a>
      </el-header>
      <el-main>
        <div class="workcontent">
          <el-table
              v-loading="loading"
              element-loading-text="拼命加载中"
              element-loading-spinner="el-icon-loading"
              element-loading-background="rgba(0, 0, 0, 0)"
              :data="tableData.slice((page-1)*limit,page*limit)"
              style="width: 100%">
            <el-table-column
                prop="time"
                label="日期"
                wifth="100">
              <template slot-scope="scope">
                <i class="el-icon-time"></i>
                <span style="margin-left: 10px">{{ scope.row.time }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="service"
                label="委托详情"
                width="290">
            </el-table-column>
            <el-table-column
                prop="address"
                label="地址"
                width="450">
              <template slot-scope="scope">
                <i class="el-icon-s-home"></i>
                <span style="margin-left: 10px">{{ scope.row.address }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="jg"
                label="悬赏"
                width="280">
              <template slot-scope="scope">
                <i class="el-icon-money"></i>
                <span style="margin-left: 10px">{{ scope.row.jg }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="state"
                label="委托状态"
                width="180">
            </el-table-column>
            <el-table-column
                fixed="right"
                label="操作"
                width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="look(scope)">查看详细信息</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 15, 20]"
          background
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
      />
    </el-container>
    <el-dialog :visible.sync="dialogTableVisible">
      <p align="center"><font style="font-family: 华文行楷">任务详情</font></p>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="任务编号">{{ row.taskId }}</el-descriptions-item>
        <el-descriptions-item label="日期">{{ row.time }}</el-descriptions-item>
        <el-descriptions-item label="委托人">{{ idname }}</el-descriptions-item>
        <el-descriptions-item label="委托">{{ row.service }}</el-descriptions-item>
        <el-descriptions-item label="联系方式">{{ row.phone }}</el-descriptions-item>
        <el-descriptions-item label="地址" :span="2">{{ row.address }}</el-descriptions-item>
        <el-descriptions-item label="悬赏金额" :span="2">{{ row.jg }}元</el-descriptions-item>
        <el-descriptions-item label="联系对方">
          <el-button type="text" @click="chat" class="el-icon-phone">点击此处在线联系对方</el-button>
        </el-descriptions-item>
      </el-descriptions>
      <br><br>
      <el-button @click="accept" type="primary">接受任务</el-button>
    </el-dialog>
  </div>
</template>

<script>
import {getTask, getUserName, acceptTask} from '../../api/index'

export default {
  data() {
    return {
      idname: '',
      total: 0,
      limit: 10,
      page: 1,
      taskid: null,
      status: ['-', '未接单', '已被接单'],
      tableData: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      loading: true,
      row: {}
    };
  },
  methods: {
    //处理切换页码
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.limit = val;
      this.pageList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.pageList();
    },
    // 具体分页操作
    pageList() {
      this.tableList = this.tableData.filter(
          (item, index) =>
              index < this.page * this.limit &&
              index >= this.limit * (this.page - 1)
      );
      this.total = this.tableData.length;
    },
    look(b) {
      this.dialogTableVisible = true;
      console.log(b)
      this.row = b.row
      this.taskid = this.row.taskId,
          console.log(this.taskid)
      getUserName({id: this.row.id}).then(res => {
        this.idname = this.row.id + ' - ' + res.data.data.name
      })
    },
    accept() {
      this.$confirm('确认接受该委托, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.accTa()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        });
      });
    },
    renderTime(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000).toISOString().replace(/T/g, ' ').replace(/\.[\d]{3}Z/, '')
    },
    accTa() {
      acceptTask(this.taskid).then((res => {
        if (res.data.code === 100) {
          this.$message({
            type: 'success',
            message: '接单成功!'
          });
          this.dialogTableVisible = false;
        } else {
          this.$message({
            type: 'warning',
            message: '接单失败'
          })
        }
        this.flash();
      }))
    },
    flash() {
      getTask({
        row: 1,
        size: 100000000,
        data: {
          state: 1
        }
      }).then(res => {
        this.tableData = res.data.data.list
        for (let i = 0; i < this.tableData.length; i++) {
          this.tableData[i].time = this.renderTime(new Date(this.tableData[i].time).getTime())
          this.tableData[i].state = this.status[this.tableData[i].state]
        }
        this.total = this.tableData.length;
        console.log(this.tableData)
        this.loading = false
      })
    },
    chat() {
      this.$router.push({
        path: '/chat',
        name: 'Chat',
        query: {
          id: this.row.id,
          pg:1
        }
      })
    }
  },
  created: function () {
    //alert(this.$route.query.name)
    this.flash();

  }
}
</script>

<style scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
  height: auto;
  background-image: url("../../static/1.png");
  background-size: cover;
  background-repeat: no-repeat;
}


.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 70px;
  padding: 7px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.el-pagination {
  bottom: 0px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: auto;
  min-height: auto;
}

.workcontent {
  height: 730px;
  overflow: auto;
}
</style>
